<template>
  <div>
    <Row>
      <Col :span="24" class="form-box">
        <Form :model="form" :label-width="80" inline>
          <FormItem label="反馈人">
            <Input v-model="form.user" placeholder="请输入反馈人昵称/用户名"></Input>
          </FormItem>
          <FormItem label="反馈状态">
            <Select v-model="form.state" style="width: 200px">
              <Option value="">全部</Option>
              <Option value="0">待处理</Option>
              <Option value="1">已处理</Option>
              <Option value="2">已删除</Option>
            </Select>
          </FormItem>
          <FormItem label="起止时间">
            <DatePicker type="daterange" :start-date="new Date(2020, 1, 1)" placement="bottom-end"
                        placeholder="请选择一个时间范围" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="search('formInline')">搜索</Button>
            <Button style="margin-left: 20px" type="success" @click="exportData">导出</Button>
          </FormItem>
        </Form>
      </Col>
      <Col :span="24">
        <div class="table-container">
          <Table border :max-height="800" stripe :columns="col" :data="tableData" no-data-text="未查询到数据"></Table>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "email",
  data() {
    return {
      form: {
        user: ''
      },
      col: [
        {title: '发送人ID', key: 'userName', tooltip: true, align: 'center'},
        {title: '昵称', key: 'nickName', tooltip: true, align: 'center'},
        {title: '发送时间', key: 'mailTime', tooltip: true, align: 'center'},
        {title: '标题', key: 'mailSub', tooltip: true, align: 'center', minWidth: 100, maxWidth: 250},
        {title: '内容', key: 'mailContent', tooltip: true, minWidth: 400, maxWidth: 600, align: 'center'},
        {
          title: '状态', key: 'mailStatus', tooltip: true, align: 'center', width: 100, render(h, obj) {
            return h(('Tag'), {attrs: {color: obj.row.mailStatus === 0 ? "success" : "error"}}, obj.row.mailStatus === 0 ? "成功" : "失败")
          }
        },
        {
          title: '操作', key: 'mailMsg', width: 100, align: 'center', render: (h, obj) => {
            return h(('Button'), {attrs: {type: 'primary', size: 'small'}}, "详情")
          }
        }
      ],
      tableData: [
        {
          userName: 'xwu36',
          nickName: 'xwu36',
          mailTime: '2020-11-24 22:21:53',
          mailSub: '注册邮件',
          mailContent: '萨达答案是1123爱上打扫打扫打扫大大大S的',
          mailStatus: 0,
          mailMsg: '爱上打算打算打'
        }
      ],
      ruleInline: {
        user: [
          {required: true, message: 'Please fill in the user name', trigger: 'blur'}
        ],
        password: [
          {required: true, message: 'Please fill in the password.', trigger: 'blur'},
          {type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    search(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!');
        } else {
          this.$Message.error('Fail!');
        }
      })
    },
    exportData() {

    }
  }
}
</script>

<style scoped>
.form-box {
  margin-top: 20px;
}

.table-container {
  margin: 0 auto;
  width: calc(100% - 40px);
  background-color: aquamarine
}
</style>
